<script setup>
import { computed, ref, watch } from "vue";
import PrePageIcon from "@/assets/svg/pagination/pre_page.svg";
import NextPaeIcon from "@/assets/svg/pagination/next_page.svg";
import FirstPageIcon from "@/assets/svg/pagination/first_page.svg";
import LastPageIcon from "@/assets/svg/pagination/last_page.svg";

defineOptions({
  name: "ReCustomPagination"
});

const emit = defineEmits(["update:pageChange"]);
const props = defineProps({
  total: {
    type: Number,
    required: true
  },
  pageSize: {
    type: Number,
    default: 10
  }
});

const currentPage = ref(1);

const totalPages = computed(() => {
  return Math.ceil(props.total / props.pageSize);
});

const pageNumbers = computed(() => {
  const numbers = [];
  for (let i = 1; i <= totalPages.value; i++) {
    numbers.push(i);
  }
  return numbers;
});

const handlePrevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value -= 1;
  }
};

const handleNextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value += 1;
  }
};

const goToPage = page => {
  currentPage.value = page;
};

watch(
  () => currentPage.value,
  newValue => {
    emit("update:pageChange", newValue);
  }
);
</script>

<template>
  <div class="custom-pagination">
    <!--首页-->
    <el-button :disabled="currentPage <= 1" style="padding: 0; margin: 0; width: 53px; height: 53px" text @click="goToPage(1)">
      <!--todo 上一页 缺少禁用状态下的图标-->
      <span v-if="currentPage <= 1">首页</span>
      <FirstPageIcon v-else />
    </el-button>

    <!--上一页-->
    <el-button :disabled="currentPage <= 1" style="padding: 0; margin: 0; width: 53px; height: 53px" text @click="handlePrevPage">
      <!--todo 上一页 缺少禁用状态下的图标-->
      <span v-if="currentPage <= 1">上一页</span>
      <PrePageIcon v-else />
    </el-button>

    <!-- 页码按钮 -->
    <button v-for="page in pageNumbers" :key="page" :class="['page-btn', { active: page === currentPage }]" @click="goToPage(page)">
      {{ page }}
    </button>

    <el-button :disabled="currentPage >= totalPages" class="next-btn" type="info" style="padding: 0; margin: 0; width: 53px; height: 53px" text @click="handleNextPage">
      <!--todo 下一页 缺少禁用状态下的图标-->
      <span v-if="currentPage >= totalPages">下一页</span>
      <NextPaeIcon v-else />
    </el-button>

    <el-button :disabled="currentPage >= totalPages" class="next-btn" type="info" style="padding: 0; margin: 0; width: 53px; height: 53px" text @click="goToPage(totalPages)">
      <!--todo 下一页 缺少禁用状态下的图标-->
      <span v-if="currentPage >= totalPages">尾页</span>
      <LastPageIcon v-else />
    </el-button>
  </div>
</template>

<style scoped>
.custom-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.prev-btn,
.next-btn {
  display: flex;
  width: 53px;
  height: 53px;
  justify-content: center;
  align-items: center;
}

.prev-btn:disabled,
.next-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.page-btn {
  display: flex;
  width: 53px;
  padding: 13px 0;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 133px;
  border: 1px solid #cacaca;
}

.page-btn.active {
  border: 1px solid #2162ea;
  background: #2162ea24;
}

.page-btn:hover {
  background-color: #ddd;
}
</style>
